<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>简历</title>
	<meta name="viewport" content="width=device-width" />
	<!-- favicon图标 -->
	<link rel="shortcut icon" href="../../static/favicon.png" type="image/x-icon">
	<!-- 51la网站统计 -->
	<script src="../../static/js/tongji.js"></script>
	<link rel="stylesheet" href="css/index.css" />
	<link rel="stylesheet" href="css/side.css" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2969103_0vf6ygltyktn.css">


</head>

<body>

	<!-- ------------------ 简历 start ------------------ -->
	<!-- ------------------ 简历 end ------------------ -->

	<div class="resume-box" id="root">
		<div class="test"></div>
		<!-- ------------------ 头部 start ------------------ -->
		<div class="resume-head ">

			<div class="head-left"></div>
			<div class="head-center">
				<div class="head-label">
					个人简历
				</div>
			</div>
			<div class="head-right"></div>

		</div>
		<!-- ------------------ 头部 end ------------------ -->




		<!-- ------------------ 内容 start ------------------ -->
		<div class="resume-content">

			<!-- ------------------ 基本信息 start ------------------ -->

			<div class="basic-info ">
				<div class="basic-photo">
					<img :src="datas.jbxx.img">
				</div>
				<div class="basic-wrap">
					<div class="basic-top">
						<dl>
							<dt>{{datas.jbxx.user}}</dt>
							<dd><span>{{datas.jbxx.name}}</span>{{datas.jbxx.text}}</dd>
						</dl>
					</div>
					<div class="basic-bottom">
						<ul class="basic-list">
							<!-- v-show="index>0" -->
							<li v-for="(item, index) in datas.jbxx.data" :key="index">

								<i :class="icon[index]"></i><span>{{item.name}}</span>{{item.text}}

							</li>
							<!-- <li><span>{{datas.jbxx.data[0].name}}</span>{{datas.jbxx.data[0].text}}</li> -->
						</ul>
					</div>
				</div>

				<!-- 	<div class="list-wrap">
		<div class="list-basic">
			<ul class="basic-list">
				<li v-for="(item, index) in datas.jbxx.data" :key="index">
					<i>{{item.name}}</i><span>{{item.text}}</span>
				</li>
	
			</ul>
			<div class="basic-photo">
				
				<img :src="datas.jbxx.img">
			</div>
		</div>
	</div> -->
			</div>




			<!-- ------------------ 基本信息 end ------------------ -->


			<!-- ------------------ 教育背景 start ------------------ -->
			<div class="module jybj">
				<div class="module-title">
					<h3>{{datas.jybj.title}}</h3>
				</div>

				<div class="module-content">


					<div class="list-wrap" v-for="(item, index) in datas.jybj.data" :key="index">
						<ul class="item-three">
							<li>{{ item.time }}</li>
							<li>{{ item.name }}</li>
							<li>{{ item.type }}</li>
						</ul>

						<div class="item-edit" v-if="item.data">

							<p>
								<strong>{{ item.data.name }}</strong>{{ item.data.text}}
							</p>
						</div>



					</div>


				</div>
			</div>
			<!-- ------------------ 教育背景 end ------------------ -->


			<!-- ------------------ 项目经验 start ------------------ -->
			<div class="module xmjy">
				<div class="module-title">
					<h3>{{datas.xmjy.title}}</h3>
				</div>
				<div class="module-content">


					<div class="list-wrap" v-for="(item, index) in datas.xmjy.data" :key="index">
						<ul class="item-two">
							<li>{{item.name}}</li>
							<li>{{item.text}}</li>
						</ul>
						<div class="item-edit">

							<p v-for="(item, index) in item.data" :key="index">
								<strong>{{item.name}}</strong><span>{{item.text}}</span>
							</p>

							<p>
								<strong>{{item.zhize.name}}</strong>
							<ul>
								<li v-for="(item, index) in item.zhize.data" :key="index">{{item.text}}</li>
							</ul>
							</p>
						</div>



					</div>


				</div>
			</div>
			<!-- ------------------ 项目经验 end ------------------ -->


			<!-- ------------------ 工作经历 start ------------------ -->
			<div class="module gzjl">
				<div class="module-title">
					<h3>{{datas.gzjy.title}}</h3>
				</div>

				<div class="module-content">


					<div class="list-wrap" v-for="(item, index) in datas.gzjy.data" :key="index">

						<ul class="item-three">
							<li>{{item.time}}</li>
							<li>{{item.name}}</li>
							<li>{{item.type}}</li>
						</ul>
						<div class="item-edit">
							<ol v-for="(item, index) in item.data" :key="index">
								<li>{{item.text}}</li>
							</ol>

						</div>
					</div>



				</div>
			</div>
			<!-- ------------------ 工作经验 end ------------------ -->


			<!-- ------------------ 专业技能 start ------------------ -->
			<div class="module jntc">
				<div class="module-title">
					<h3>{{datas.jntc.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-edit" v-for="(item, index) in datas.jntc.data" :key="index">
							<ul>
								<li>{{item.text}}</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------------ 专业技能 end ------------------ -->

			<!-- ------------------ 荣誉证书 start ------------------ -->
			<div class="module ryzs">
				<div class="module-title">
					<h3>{{datas.ryzs.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-between">
							<ul>
								<li v-for="(item, index) in datas.ryzs.data.ry" :key="index">
									<i>{{item.name}}</i><span>{{item.text}}</span>
								</li>
							</ul>
							<ul>
								<li v-for="(item, index) in datas.ryzs.data.zs" :key="index">
									<i>{{item.name}}</i><span>{{item.text}}</span>
								</li>
							</ul>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------------ 荣誉证书 end ------------------ -->


			<!-- ------------------ 校园经历 start ------------------ -->
			<div class="module xyjl">
				<div class="module-title">
					<h3>{{datas.xyjl.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-edit">
							<p v-for="(item, index) in datas.xyjl.data" :key="index">
								<strong>{{item.name}}</strong><span>{{item.text}}</span>
							</p>
						</div>
					</div>

				</div>
			</div>
			<!-- ------------------ 校园经历 end ------------------ -->
			<!-- ------------------ 自我评价 start ------------------ -->
			<div class="module zwpj">
				<div class="module-title">
					<h3>{{datas.zwpj.title}}</h3>
				</div>
				<div class="module-content">

					<div class="list-wrap">
						<div class="item-edit">
							<ul>
								<li v-for="(item, index) in datas.zwpj.data" :key="index">{{item.text}}</li>
							</ul>
						</div>

					</div>

				</div>
			</div>
			<!-- ------------------ 自我评价 end ------------------ -->
			<!-- ------------------ 公共模块 start ------------------ -->
			<!-- 	<div class="module">
					<div class="module-title">
						<h3>公共模块</h3>
					</div>
					<div class="module-content">

						<div class="list-wrap">
							公共模块
						</div>

					</div>
				</div> -->
			<!-- ------------------ 公共模块 end ------------------ -->






		</div>
		<!-- ------------------ 内容 end ------------------ -->
		<div class="footer">
			<span>bealei</span>
		</div>
	</div>

	<!-- ------------------ 侧边栏 ------------------ -->
	<div class="side">
		<ul>
			<li class="blue"></li>
			<li class="green"></li>
			<li class="red"></li>
			<li class="yellow"></li>
			<li class="pdf">打印</li>

		</ul>
	</div>


</body>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-2.7.14.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/side.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	new Vue({
		el: '#root',

		data() {
			return {
				datas: [],
				icon: [
					'iconfont icon-calendar1',
					'iconfont icon-weixin',
					'iconfont icon-jiaoyuye',
					'iconfont icon-youjian1',
					'iconfont icon-gongzuodidian-',
					'iconfont icon-youjian3'
				]
			}
		},

		mounted() {
			// 这里一定要使用常量 const来引用this，不然可能会出现this指向问题
			const that = this
			// 使用getjson读取数据
			$.getJSON("./data.json", function (res) {
				// 将读取到的json数据赋值给rows
				that.datas = res.content;
				console.log("请求到的数据：", res)
			});
		},

	})
</script>

</html>